import React, { Component } from 'react'
import Far from './Far'

// 引入context(为了保证传递的context和接收的context是同一个对象)
import context from './context'
// 需求: App有一个数据要直接传递给Son组件
// 使用context:
// 1. 创建context对象
// const context = React.createContext()
// 2. 传递数据的组件中,从context对象上解构Provider组件,使用Provider包裹当前组件的jsx的结构,Provider上写一个value属性,value的值就是要传递的数据
// 3. 需要接收数据的组件,从context对象上解构Consumer组件, 使用Consumer组件. 把Consumer组件使用的代码,写在接收数据组件jsx的位置,Consumer子节点的位置写插值表达式,插值表达式中写回调函数,回调函数的形参是App传递的数据,回调函数的返回值要求写接收数据组件原本的jsx解构

// 注意: context技术要求: 传递数据使用的context对象和接收数据使用的context对象必须是同一个
// const { Provider } = context
export default class App extends Component {
  state = {
    xxx: 'lt,嘿嘿嘿',
  }
  render() {
    return (
      <context.Provider value={this.state.xxx}>
        App
        <hr />
        <Far></Far>
      </context.Provider>
    )
  }
}
